<template>
  <div>
    <table class="tab">
      <thead>欢迎光临_vue开发的收银系统_水果店</thead>
      <tr>
        <td>苹果10￥/斤,折扣 8 折</td>
      </tr>
      <tr>
        <td>请输入你要购买的斤数<input type="number" v-model="num"></td>
      </tr>
      <tr>
        <td><button @click="pay">结账买单~</button></td>
      </tr>
      <tr>
        <td>结账:总价: {{total}} ￥元 折后价: {{discount}} ￥元 省了: {{save}} ￥元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      total: 10,
      discount: 8,
      save: 2,
      num: 1
    }
  },

  created () {

  },

  methods: {
    pay () {
      this.total = 10 * this.num
      this.discount = 0.8 * this.total
      this.save = 10 * this.num - 0.8 * this.total
    }
  }
}
</script>

<style scoped lang='less'>
  .tab {
    width: 800px;
    margin: auto;
    text-align: center;
    background-color: #eee;
  }
</style>
